<style lang="scss" scoped>
.money_info {
  .cut_it {
    background: #fff;
    width: 100%;
    padding: 0.2rem 0.14rem 0.2rem;
    border-bottom: 0.08rem solid #eef7fe;
    li {
      padding: 0 0.26rem;
      &.active .full {
        background: #3871fe;
      }
      .item {
        padding-bottom: 64%;
        div {
          border-radius: 0.05rem;
          background: #9d9d9d;
        }
      }
    }
  }
  .money_list {
    li {
      padding: 0.1rem 0.15rem;
      border-bottom: 1px solid #eee;
      div:first-child {
        padding-bottom: 0.05rem;
      }
    }
  }
  .order_income {
    .sub_tit {
      background: #eef7fe;
      padding: 0.05rem 0.15rem;
    }
    ul {
      padding-bottom: 0.4rem;
    }
    li {
      padding: 0.16rem 0.15rem;
      div:last-child {
        width: 0.6rem;
      }
    }
  }
}
</style>

<template>
  <div class="money_info full bgfff">
    <nav>
      <ul class="cut_it cfff font-14 flex-col box-sizing">
        <li class="box1" :class="{active:!getMoney}" @click="getMoney = false">
          <div class="position-r item">
            <div class="position-a full box-center">订单收入</div>
          </div>
        </li>
        <li class="box1" :class="{active:getMoney}" @click="getMoney = true">
          <div class="position-r item">
            <div class="position-a full box-center">提现明细</div>
          </div>
        </li>
      </ul>
    </nav>
    <main class="">
      <div class="order_income" v-show="!getMoney">
        <!-- <div class="sub_tit font-12 padding-l15 c82 ">一月</div> -->
        <ul>
          <li class="border-b flex-col font-14" v-for="(it,i) in getInfo.list" :key="i">
            <div class="c82">{{it.createTime | toTime('yyyy-MM-dd')}}</div>
            <div class="padding-lr10">{{it.userName}}</div>
            <div class="box1">{{it.describe}}</div>
            <div class="cred text-r">+{{it.getmoney}}</div>
          </li>

          <li class="padding-tb20 c82 box-center" v-show="!getInfo.list.length">暂无数据</li>
        </ul>
      </div>
      <ul class="money_list " v-show="getMoney">
        <li v-for="(it,i) in setInfo.list" :key="i">
          <div class="flex-col font-14">
            <div class="box1">{{it.status | getStatus}}</div>
            <div class="cred">-{{it.extractinfoMoney}}</div>
          </div>
          <div class="flex-col c82 font-12">
            <div class="box1">下单时间： {{it.createTime}}</div>
          </div>
        </li>
        <li class="padding-tb20 c82 box-center" v-show="!setInfo.list.length">暂无数据</li>
      </ul>
    </main>
  </div>

</template>

<script>
export default {
  name: "money_list",
  data() {
    return {
      getMoney: false,
      first: true,
      getInfo: { page: 0, list: [], totalPage: 0 },
      setInfo: { page: 0, list: [], totalPage: 0 }
    };
  },
  watch: {
    getMoney(has) {
      if (has && this.first) {
        this.getList();
        this.first = false;
      }
    }
  },
  filters: {
    //订单状态
    getStatus(val) {
      let status = {
        // 订单状态 0 申请提现 1 申请失败 2 待打款 3 提现成功
        "0": "申请提现",
        "1": "申请失败",
        "2": "待打款",
        "3": "提现成功"
      };
      return status[val];
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getList();
    });
  },
  methods: {
    getList(has = false) {
      let that = this,
        page,
        _name,
        _url = "";
      if (this.getMoney) {
        _name = "setInfo";
        _url = "commissionextractinfo/list";
      } else {
        _name = "getInfo";
        _url = "commissionincomeinfo/list";
      }

      page = this[_name].page = ++this[_name].page;
      if (has && page > this[_name].totalPage) {
        this.layer("已加载全部");
        return;
      }

      this.http
        .post(_url, {
          page,
          limit: that.limit
        })
        .then(res => {
          this[_name].totalPage = res.data.totalPage;
          if (has) {
            this[_name].list.push(res.data.list);
          } else {
            this[_name].list = res.data.list;
          }
        });
    }
  }
};
</script>
